<template>
  <div class="home-container">
    <!-- 当前位置 -->
    <van-row justify="space-between" class="home-loction">
      <van-col span="12">
        <div class="location-con" @click="selectAddress">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-weizhi"></use>
          </svg>
          <span class="location-name">{{selectAddress1}}</span>
          <van-icon name="arrow-down" />
        </div>
      </van-col>
      <van-col span="12" style="text-align: end">
        <svg class="icon" aria-hidden="true" @click="router.push('msg')">
          <use xlink:href="#icon-rengongfuwu2"></use>
        </svg>
      </van-col>
    </van-row>
    <!-- 轮播图 -->
    <van-swipe
      :show-indicators="false"
      :autoplay="3000"
      :duration="1000"
      class="home-swiper"
    >
    <van-swipe-item v-for="image in images" :key="image">
      <van-image :src="image" />
    </van-swipe-item>
    </van-swipe>
    <!-- 公告栏 -->
    <van-notice-bar
      :scrollable="false"
      class="notice-bar"
      mode="link"
      background="#fffbe8"
    >
<!--      color="#333"-->
<!--      color="#1989fa"-->
<!--      background="#fff"-->
      <template #left-icon>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tonggao"></use>
        </svg>
      </template>
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="5000"
        :duration="1000"
        :touchable="false"
        :show-indicators="false"
      >
        <van-swipe-item
            v-for="item in noticeProps"
            :key="item"
            @click="selectNotice(item)"
        >
          {{ item }}
        </van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <!-- 宫格内容展示 -->
    <div class="grid-container">
      <div class="grid-left">
        <span>园区介绍</span>
        <span>全方位服务体系</span>
        <div class="grid-left-btn" @click="enterIntro">去了解</div>
        <i class="iconfont icon-yuanqujieshaoguanli"></i>
      </div>
      <div class="grid-right">
        <div class="grid-right-top" @click="router.push('/guide')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zhinan"></use>
          </svg>
          <span>入驻指南</span>
        </div>
        <div class="grid-right-bottom" @click="router.push('/moreService')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yewubanli2"></use>
          </svg>
          <span>更多服务</span>
        </div>
      </div>
    </div>
    <!-- 园区新闻 -->
    <div class="news-con">
      <ul class="news-title">
        <li>
          <span>园区新闻</span>
        </li>
      </ul>
      <div class="news-list">
        <div class="news-swiper">
          <div
            class="news-swipe-item"
            v-for="item in newsImg"
            :key="item.src"
            @click="enterNews(item.status, item.content)"
          >
              <van-image :src="item.src" />
              <div class="news-item">
              <span>{{ item.content }}</span>
            </div>
            </div>
          </div>
      </div>
    </div>
    <!-- 企业政策 -->
    <div class="news-con">
      <ul class="news-title">
        <li>
          <span>企业政策</span>
        </li>
      </ul>
      <ul class="policy-grid-con">
        <li
            v-for="(item, index) in policyProps"
            :key="index"
            @click="enterNews(item.status, item.content)"
        >
          <div class="policy-grid-left">
            <div class="policy-grid-left-top">
              {{ item.content }}
            </div>
            <div class="policy-grid-left-bottom">
              <span class="policy-btn policy-btn-msg" v-if="item.status === 'msg'">消息</span>
              <span class="policy-btn policy-btn-notice" v-else-if="item.status === 'notice'">通知</span>
              <span class="policy-btn policy-btn-events" v-else-if="item.status === 'events'">活动</span>
              <span class="policy-btn policy-btn-zsyz" v-else-if="item.status === 'zsyz'">政策</span>
              <span>{{ item.record }}浏览</span>
              <span>{{ item.time }}</span>
            </div>
          </div>
          <div class="policy-grid-right" v-if="item?.src">
            <img :src="item.src" alt="">
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import './home.less';
import { useRouter, useRoute } from 'vue-router';
import img1 from '@/assets/images/AHTV.png'
import img from '@/assets/images/AHTV1.png'
import img2 from '@/assets/images/AHTV2.png'
import img3 from '@/assets/images/AHTV3.png'
import news1 from '@/assets/images/news1.png'
import news2 from '@/assets/images/news2.png'
import news3 from '@/assets/images/news3.png'
import news4 from '@/assets/images/news4.png'
import news5 from '@/assets/images/news5.png'

const router = useRouter();
const route = useRoute();

const images = ref([img1, img2, img3, img]);
const newsImg = ref([
  {
    src: news1,
    content: '李书福2024新年致辞：心有繁星，前行不辍',
    status: '1'
  },{
    src: news2,
    content: '三亚中央商务区与吉利汽车高科技谷 “双园双总部”基地正式落地',
    status: '2'
  },{
    src: news3,
    content: '吉利控股集团与中国银行深化合作伙伴关系 加强全面战略协同',
    status: '3'
  },{
    src: news4,
    content: '吉利汽车2023年总营收创新高 盈利能力显著提升 新能源转型成果凸显',
    status: '4'
  },{
    src: news5,
    content: '极氪在美国纽约证券交易所挂牌上市',
    status: '5'
  },
]);
const serviceFlag = ref(false);
const gridProps = ref([
  {
    icon: 'yuanqujieshao',
    con: '园区介绍',
    path: 'parkIntroduction'
  },
  {
    icon: 'ruzhuzhinan',
    con: '入驻指南',
    path: 'guide'
  },
  {
    icon: 'a1',
    con: '来访登记',
    path: 'visitorRegistration'
  },
  {
    icon: 'yewubanli',
    con: '业务办理',
    path: ''
  },
  {
    icon: 'qiyezhengce',
    con: '企业政策',
    path: 'enterprisePolicy'
  },
  {
    icon: 'fuwudianhua',
    con: '服务电话',
    path: 'serviceTelephone'
  },
  {
    icon: 'dibudaohanglan-',
    con: '园区新闻',
    path: 'enterprisePolicy'
  },
  {
    icon: 'rengongfuwu',
    con: '人工服务',
    path: 'serviceManual'
  },
]);
const policyProps = ref([
  {
    status: 'events',
    content: '浙江省关于房价不限购政策',
    record: 1900,
    time: '1小时前',
    src: news1
  },
  {
    status: 'notice',
    content: '浙江高新区科技园补贴政策',
    record: 665,
    time: '2小时前',
    src: news2
  },
  {
    status: 'zsyz',
    content: '浙江招商引资政策',
    record: 899,
    time: '2小时前',
    src: news4
  },
]);
const noticeProps = ref([
  '端午放假通知',
  '电梯故障的通知',
  '食堂菜品变更通知',
])

const selectAddress1 = route.query.address || '马来西亚AHTV产业园';
// console.log(selectAddress1, '父')
const selectAddress = () => {
  router.push('/address');
}
const selectNotice = (item: string) => {
  router.push({
    name: 'notice',
    query: {
      msg: item,
      address: selectAddress1,
    }
  });
}
const enterIntro = () => {
  router.push({
    name: 'parkIntroduction',
    query: {
      address: selectAddress1,
    }
  })
}

const enterGrid = (path: string) => {
  if (path === 'serviceManual') {
    serviceFlag.value = true;
    window.location.href = "tel: 021-57810920"
    return false;
  }
  router.push(path)
}
const enterNews = (status: string, content: string) => {
  router.push({
    name: 'enterprisePolicy',
    query: {
      status,
      content
    }
  })
}

</script>
